<template lang="pug">
.main-cont
    .aside(:style="{width:isCollapse?'64px':'220px'}")
        //- .small(:class="{'active':isCollapse}" @click="isCollapse=!isCollapse")
        el-menu(
            :default-active="path"
            :collapse="isCollapse"
            text-color="#fff"
            :unique-opened="false"
            :default-openeds="['0','1','2','3','4','5']"
        )
            el-sub-menu(:index='String(i)' v-for="(item,i) in menus" :key="i" v-show="item.children")
                template(#title)
                    span {{item.menuName}}
                el-menu-item-group
                    el-menu-item(
                        v-for="(item2, index2) in item.children"
                        :index="`${item2.menuUrl && item2.menuUrl.split('/')[1]}`"
                        :key="index2"
                        @click="selectMenu(item2)"
                    )
                        template(#title) {{item2.menuName}}
                        //- .me-w
                        //-     .icon.iconfont(:class="item2.icon")

    .right-cont
            router-view
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { storageGet, storageSet } from '@/utils'
import sysApi from '@system/sysApi'
import { muenStore } from '@/stores'
const store = muenStore()
const route = useRoute()
const router = useRouter()
const path = ref('')

const isCollapse = ref(false)
const selectMenu = (item)=>{
    router.push(item.menuUrl)
}
//菜单列表
let treeData = []
const sysMenuqueryAllNotPage = () => {
    treeData.value = []
    sysApi.sysMenuqueryAllNotPage().then(res => {
        let arr = res.data.filter(val => val.showFlag == 1)
        let obj = {}
        arr.forEach(val => {
            obj[val.id] = val
        })
        arr.forEach(val => {
            if (val.parentId){
                obj[val.parentId].children = obj[val.parentId].children || []
                obj[val.parentId].children.push(val)
            }
        })
        arr.forEach(val => {
            if(val.id == 1){
                treeData.push(val)
            }
        })
        if(treeData.length){//拼装menuObj
            treeData[0].children.forEach(val => {
                if(val.menuName == '业务菜单'){
                    val.children.forEach(va =>{
                        if(va.children && va.children[0].children){
                            menuObj[va.menuName] = va.children
                        }else{
                            menuObj[va.menuName] = [va]
                        }
                    })
                }
            })
            store.setBaseMenu(res.data)
            menus.value = menuObj[store.nowMenu]
            // menuInit()
        }
    })
}

onMounted(() => {
    sysMenuqueryAllNotPage()
})
let menuObj = {
    // 工作台: [{
    //     menuUrl: '',
    //     menuName: '工作台',
    //     children: [{
    //         menuUrl: '/workbenchPage',
    //         menuName: '工作台'
    //     }]
    // },
    // {
    //     menuUrl: '',
    //     menuName: '评审进度',
    //     children: [{
    //         menuUrl: '/reviewProgress',
    //         menuName: '可研评审进度'
    //     }, {
    //         menuUrl: '/initialDesignReviewProgress',
    //         menuName: '初设评审进度'
    //     }, {
    //         menuUrl: '/workingDrawingReviewProgress',
    //         menuName: '施工图评审进度'
    //     }]
    // }],
    // 可研评审管理: [{
    //     menuUrl: '',
    //     menuName: '可研评审计划管理',
    //     children: [{
    //         menuUrl: '/planImport',
    //         menuName: '评审计划导入'
    //     }, {
    //         menuUrl: '/planUpload',
    //         menuName: '送审资料上传'
    //     }, {
    //         menuUrl: '/projectInternalAudit',
    //         menuName: '项目内审'
    //     }, {
    //         menuUrl: '/projectDispatch',
    //         menuName: '项目分发'
    //     }, {
    //         menuUrl: '/planExamine',
    //         menuName: '计划查看'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '可研项目评审管理',
    //     children: [{
    //         menuUrl: '/projectMeetingArrangement',
    //         menuName: '会议安排'
    //     }, {
    //         menuUrl: '/projectFormalReview',
    //         menuName: '正式评审'
    //     }, {
    //         menuUrl: '/projectDataSubmission',
    //         menuName: '收口资料提交'
    //     }, {
    //         menuUrl: '/projectDataReview',
    //         menuName: '收口资料审核'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '设计质量评分',
    //     children: [{
    //         menuUrl: '/engMangement4/engMangement41',
    //         menuName: '设计质量评分'
    //     }]
    // }],
    // 初设评审管理: [{
    //     menuUrl: '',
    //     menuName: '初设评审计划管理',
    //     children: [{
    //         menuUrl: '/reviewManagement',
    //         menuName: '项目内审'
    //     }, {
    //         menuUrl: '/reviewPlanDeclaration',
    //         menuName: '计划申报'
    //     }, {
    //         menuUrl: '/reviewPlanExamine',
    //         menuName: '计划审核'
    //     }, {
    //         menuUrl: '/reviewPlanDispatch',
    //         menuName: '项目分发'
    //     }, {
    //         menuUrl: '/reviewPlanView',
    //         menuName: '计划查看'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '初设项目评审管理',
    //     children: [{
    //         menuUrl: '/preDesignExpertReview',
    //         menuName: '专家预评审'
    //     }, {
    //         menuUrl: '/preDesignMeetingArrangement',
    //         menuName: '会议安排'
    //     }, {
    //         menuUrl: '/preDesignFormalReview',
    //         menuName: '正式评审'
    //     }, {
    //         menuUrl: '/preDesignDataSubmission',
    //         menuName: '收口资料提交'
    //     }, {
    //         menuUrl: '/preDesignDataReview',
    //         menuName: '收口资料审核'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '  设计质量评分',
    //     children: [{
    //         menuUrl: '/engMangement7/engMangement71',
    //         menuName: '  设计质量评分'
    //     }]
    // }],
    // 施工图评审管理: [{
    //     menuUrl: '',
    //     menuName: '施工图评审计划管理',
    //     children: [{
    //         menuUrl: '/engMangement8/engMangement81',
    //         menuName: '项目内审'
    //     }, {
    //         menuUrl: '/engMangement8/engMangement82',
    //         menuName: '计划申报'
    //     }, {
    //         menuUrl: '/engMangement8/engMangement83',
    //         menuName: '计划审核'
    //     }, {
    //         menuUrl: '/engMangement8/engMangement84',
    //         menuName: '项目分发'
    //     }, {
    //         menuUrl: '/engMangement8/engMangement85',
    //         menuName: '计划查看'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '初设项目评审管理',
    //     children: [{
    //         menuUrl: '/engMangement9/engMangement91',
    //         menuName: '专家预评审'
    //     }, {
    //         menuUrl: '/engMangement9/engMangement91',
    //         menuName: '会议安排'
    //     }, {
    //         menuUrl: '/engMangement9/engMangement92',
    //         menuName: '正式评审'
    //     }, {
    //         menuUrl: '/engMangement9/engMangement93',
    //         menuName: '收口资料提交'
    //     }]
    // }, {
    //     menuUrl: '',
    //     menuName: '  设计质量评分',
    //     children: [{
    //         menuUrl: '/engMangement7/engMangement71',
    //         menuName: '  设计质量评分'
    //     }]
    // }],
    // 配置管理: [{
    //     menuUrl: '',
    //     menuName: '配置管理',
    //     children: [{
    //         menuUrl: '/configFieldLibrary',
    //         menuName: '字段库'
    //     }, {
    //         menuUrl: '/indicatorLibrary',
    //         menuName: '指标库'
    //     }, {
    //         menuUrl: '/typicalIndicatorsLibrary',
    //         menuName: '典设指标库'
    //     },
    //     {
    //         menuUrl: '/reviewVerification',
    //         menuName: '评审校核库'
    //     },
    //     {
    //         menuUrl: '/reviewAttachmentsList',
    //         menuName: '评审附件目录'
    //     }]
    // },
    // {
    //     menuUrl: '',
    //     menuName: '评审配置',
    //     children: [{
    //         menuUrl: '/reviewAssociation',
    //         menuName: '评审关联配置'
    //     }]
    // }],
    // 智能检索: [{
    //     menuUrl: '',
    //     menuName: '智能检索',
    //     children: [{
    //         menuUrl: '/retrievalView',
    //         menuName: '智能检索'
    //     }]
    // }],
    // 工程管理: [{
    //     menuUrl: '',
    //     pe: 'engMangement',
    //     menuName: '工程管理',
    //     icon: 'icon-gongchengguanli',
    //     children: [{
    //         menuUrl: '/engMangement/engMangement',
    //         menuName: '工程管理'
    //     },
    //     {
    //         pe: 'modelDataProcess',
    //         menuUrl: '/modelDataProcess/modelDataProcess',
    //         icon: 'icon-shujuchuli',
    //         menuName: '数据处理'
    //     }
    //     ]
    // }
    // ],
    系统管理: [
        {
            pe: 'systemMenu',
            menuUrl: '',
            menuName: '系统管理',
            icon: 'icon-shezhi',
            children: [{
                menuUrl: '/enterpriseManage',
                icon: 'icon-qiye',
                menuName: '企业管理'
            },
            {
                menuUrl: '/userManage',
                icon: 'icon-duoyonghuzw',
                menuName: '用户管理'
            },
            {
                menuUrl: '/rolesManage',
                icon: 'icon-jiaose',
                menuName: '角色管理'
            },
            {
                menuUrl: '/menuManage',
                icon: 'icon-caidanshezhi',
                menuName: '菜单管理'
            },
            {
                menuUrl: '/dictionariesManage',
                icon: 'icon-gonggongzidianshezhi',
                menuName: '字典管理'
            },
            {
                menuUrl: '/logManage',
                icon: 'icon-rizhi',
                menuName: '日志管理'
            },
            {
                menuUrl: '/structuredManage',
                icon: 'icon-jiegouhua',
                menuName: '结构字典管理'
            }
            // {
            //     menuUrl: '/fieldManage',
            //     icon: 'icon-ziduankongzhi',
            //     menuName: '字段配置'
            // }
            ]
        }]
}
const menus = ref([])
watch(()=>route.path, (newVal)=>{
    path.value = newVal.split('/')[1]
    if(menus.value.length == 0){
        menus.value = menuObj['工作台']
    }
    menus.value && menus.value.forEach(item1=>{
        item1.children && item1.children.forEach(item2=>{
            item2.active = false
            if(item2.menuUrl === newVal){
                item2.active = true
            }
        })
    })
}, { immediate: true })
const menuInit = () => {
    menus.value = menuObj[store.nowMenu]
    //如果当前路由不在，说明是切换了大类，默认选中第一个目录节点
    let has = false
    menuObj[store.nowMenu].forEach(val => {
        val.children && val.children.forEach(va => {
            if(va.menuUrl && va.menuUrl.indexOf(route.path) > -1){
                has = true
            }
        })
    })
    if(!has){
        selectMenu(menus.value[0].children[0])
    }
}
watch(()=>store.nowMenu, (newVal, oldVal)=>{
    if(!menuObj[newVal] || !oldVal){
        return
    }
    menuInit()
}, { immediate: true })

</script>
<style lang="less" scoped>
@import '@/assets/theme.less';
.main-cont{
    display: flex;
    height: 100%;
    width: 100%;
    .right-cont{
        background: #f0f1f2;
        height: calc(100% - 15px);
        flex-grow: 1;
        padding: 0 10px 8px 10px;
        overflow: hidden;
        border-radius: 5px 5px;
        margin: 5px 10px 10px 5px;
        // box-shadow: 0 0 5px 0 #ccc;
    }
}
.aside {
    flex-shrink: 0;
    background: linear-gradient( 180deg, rgba(6,43,83,0) 0%, #062B53 100%);
    height: 100%;
    position: relative;
    margin-right: 7px;
    transition: width 1s ease;
    .small{
        cursor: pointer;
        &:hover{
            opacity: .8;
        }
        position: absolute;
        right: -7px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 40px;
        background: #E5A970;
        &::after,&::before{
            border-left: 0;
            border-style: solid;
            border-width: 3px 4px 3px 0;
            border-color: transparent #fff transparent transparent;
            content: '';
            position: absolute;
            top: 17px;
            left:1px;
            width: 0;
            height: 0;
        }
        &::before{
            border-width: 3px 0 3px 4px;
            border-color: transparent #fff transparent transparent;
            border-color: transparent transparent transparent #fff;
            display: none;
        }
        &.active{
            &::after{
                display: none;
            }
            &::before{
                display: block;
            }
        }
    }
}
.iconfont{
        margin-right: 5px;

}
.me-w{
    display: flex;
    align-items: center;
    img{
        margin-right: 5px;
    }
}
.sel-w{
    display: flex;
    padding: 5px 10px 5px 0;
    .label{
        width: 70px;
        text-align: center;
        font-size: 12px;
        line-height: 32px;
        color: #fff;
        flex-shrink: 0;
    }
}
:deep(.el-menu-item-group__title){
    display: none;
}
:deep(.el-menu.el-menu--vertical){
    height: 100%;
    overflow: auto;
}
</style>
